<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      :empty-text="'无数据'"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column prop="username" align="center" label="账号" />
      <el-table-column prop="ipaddr" align="center" label="地址" />
      <el-table-column prop="status" align="center" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">{{ scope.row.status === '0' ? '成功' : '失败' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="message" align="center" label="消息" />
      <el-table-column prop="loginTime" align="center" label="时间" />
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>

import { getLoginInfoList } from '@/api/logininfor'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      list: null,
      listLoading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  created() {
    this.getLoginInfoList()
  },
  methods: {
    getLoginInfoList() {
      this.listLoading = true
      getLoginInfoList(this.queryParams).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    getList() {
      this.getLoginInfoList()
    }
  }
}

</script>
